"use strict";

/**
 * @auther wtfssd
 * Created by wtfssd on 2017/11/7
 */
import * as React from 'react'

const {View, TouchableOpacity, ScrollView, DeviceEventEmitter, Alert} = require('react-native');
const {connect} = require('react-redux');
const NavigationBar = require('react-native-navbar').default;
const {Actions} = require("react-native-router-flux");
import {autoSize, commonProps, commonStyles} from "../../assets/styles/common";
import NavBackButton from "../../component/BackButton";
import {activeStyles} from "../../assets/styles/community";
import Avatar from "../../component/Avatar";
import {groupStyles} from "../../assets/styles/groups";
import MyIcon from "../../component/icon";
import MyText from "../../component/MyText";
import {SCREEN_WIDTH} from "../../constant";
import Line from "../../component/Line";
import {guideStyles} from "../../assets/styles/guide";

import MyInputToolBar from "../../component/MyInputToolBar";
import CommentItem from "../../component/CommentItem";
import {ActiveDetailPage} from "../../interface/router";
import Request from "../../utils/Request";

import constant from "../../utils/constant";


const moment = require('moment');
const {Toast} = require('antd-mobile');
const Remind = require('react-native-wtfssd-remind').default;
const avatarProps = {
    borderWidth: 1,
    borderColor: '#fff',
    size: 35,
};

class Page extends React.Component<ActiveDetailPage, any> {

    joinOrLeaveActive = (active: activity) => {
        this.props.dispatch({
            type: 'active/joinOrLeaveActive',
            payload: {active, from: 'myActives'}
        });
        Actions.pop();
        DeviceEventEmitter.emit(constant.noticeKeyOfEnterActiveList);
    };

    addEvent = () => {
        const active: activity = this.props.active.activeDetail;
        Remind.addEvent({
            title: active.title,
            location: active.address,
            allDay: false,
            startDate: moment(active.started).format('YYYY-MM-DD HH:mm:ss'),
            endDate: moment(active.ended).format('YYYY-MM-DD HH:mm:ss'),
            URL: 'http://www.hubeihxkj.com',
            notes: active.about
        }).then(e => {
            Toast.success('添加成功', constant.ToastDuration);
        }).catch(e => {

            if (e.message === 'permissions denied') {
                Alert.alert(
                    '警告',
                    '暂无日历权限,请前往设置->隐私->日历->火星空间 打开日历权限',
                    [
                        {text: '取消'},
                        {text: '确定'},
                    ],
                );
            }
        })
    };
    renderMembers = (members) => {
        return members.map((item, index) => {
            return <Avatar key={index} {...avatarProps}
                           style={[groupStyles.member, {zIndex: 8 - (index * 2), backgroundColor: '#DC6451'}]}
                           source={item}/>
        })
    };

    //点赞
    onPraise = (type: string, item) => {
        // this.props.dispatch({
        //     type: 'post/praise',
        //     payload: {
        //         type,
        //         typeId: item.id,
        //         item
        //     }
        // })
    };

    renderComment = () => {
        let comments = [];

        const activeDetail: activity = this.props.active.activeDetail;
        if (!activeDetail) return null;
        if (activeDetail && Array.isArray(activeDetail.comments) && activeDetail.comments.length > 0) {
            activeDetail.comments.map((item: commentItem, index) => {
                if (item && item.user) {
                    comments.push(<CommentItem key={index} item={item}
                                               onPraisePress={this.onPraise.bind(this, 'postcomment')}/>)
                }
            })
        }
        return (<View style={{marginBottom: 35}}>{comments}</View>);
    };

    render() {
        const item: activity = this.props.active.activeDetail;
        return (
            <View style={[commonStyles.container, commonStyles.relative]}>
                <NavigationBar {...commonProps.navBar}
                               leftButton={<NavBackButton
                                   icon={{name: 'icon-common-fanhui-copy', color: '#fff', size: 25}}/>}
                               title={<MyText numberOfLines={1} color={'#fff'} style={{
                                   width: SCREEN_WIDTH, height: 30, paddingHorizontal: 60,
                                   textAlign: 'center'
                               }}>{item.title}</MyText>}
                />

                <View style={commonStyles.flex1}>
                    <ScrollView>
                        <View style={[activeStyles.listItem, activeStyles.item, commonStyles.flexRow]}>
                            <View style={[commonStyles.flex1, commonStyles.flexRow]}>
                                {/*{this.renderMembers(item.users)}*/}
                            </View>
                            <TouchableOpacity onPress={this.joinOrLeaveActive.bind(this, item)}>
                                <View
                                    style={[commonStyles.flexRow, groupStyles.joinBtn, item.isJoin ? groupStyles.isJoin : null]}>
                                    <MyIcon name={!item.isJoin ? 'icon-jia1' : 'icon-gou'}
                                            color={item.isJoin ? '#999' : '#000'} size={15}/>
                                    <MyText fontSize={15} style={{marginLeft: 5}}
                                            color={item.isJoin ? '#999' : '#000'}>{item.isJoin ? '已加入' : '加入'}</MyText>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <Line height={10}/>
                        <View style={[, activeStyles.listItem, activeStyles.item]}>
                            <View style={[commonStyles.flexRow, {alignItems: 'center'}]}>
                                <Avatar source={{uri: Request.checkImageUrl(item.pic) + ''}} circle={false}
                                        size={autoSize(85)}/>
                                <View style={commonStyles.flex1}>
                                    <MyText style={{marginLeft: 10}} numberOfLines={1} fontSize={20} color={'#333'}
                                            fontWeight={'500'}>{item.title}</MyText>
                                </View>
                            </View>
                            <MyText style={{paddingVertical: 10}}>{item.title}</MyText>
                            <View style={{paddingHorizontal: 10, display: 'flex'}}>
                                <Line width={SCREEN_WIDTH - 20}/>
                            </View>

                            <MyText style={{paddingVertical: 10, marginBottom: 30}}>{item.address}</MyText>
                            <MyText style={{paddingVertical: 10}}>{item.about}</MyText>
                        </View>
                        <View style={{backgroundColor: '#E0E0E0', paddingVertical: 10}}>
                            <TouchableOpacity activeOpacity={0.9} onPress={this.addEvent}>
                                <View style={guideStyles.loginBth}>
                                    <MyText style={guideStyles.loginText}>添加到日历</MyText>
                                </View>
                            </TouchableOpacity>
                        </View>
                        <View style={[{backgroundColor: '#F5F4F4', padding: 10}]}>
                            <MyText>活动评论</MyText>
                        </View>
                        {this.renderComment()}
                        {/*<CommentItem />*/}
                        {/*<Line/>*/}
                        {/*<CommentItem />*/}
                        {/*<Line/>*/}
                        {/*<CommentItem />*/}
                        {/*<Line/>*/}
                        {/*<CommentItem />*/}
                        {/*<Line/>*/}
                        {/*<CommentItem />*/}
                    </ScrollView>
                </View>
                <MyInputToolBar placeholder="评论这个活动"/>

            </View>
        );
    }
}


export default connect(
    ({auth, active}) => ({auth, active})
)(Page);